<template>
  <div class="drawer-border">
    <div class="print flex justify-between">
      <div>
        <el-progress v-show="printLoading" :percentage="exportPercentage"></el-progress>
      </div>
      <div class="cd-mr16">
        <el-button type="primary" plain size="mini" @click="handleExport">导出</el-button>
        <el-button type="primary" plain size="mini" @click="printer">打印</el-button>
      </div>
    </div>
    <div class="print-box">
      <div class="report-dom">
        <div class="view-title">甲供材月度需求计划表</div>
        <div class="flex justify-between">
          <div class="view-subtitle cd-ml8">合同段：{{ form.infoData.bdName }}-{{ form.infoData.zdName }}</div>
          <div class="view-subtitle basis-sm">填报时间：{{ parseTime(form.infoData.weaveDate, '{y}-{m}-{d}') }}</div>
        </div>
        <div class="table-border">
          <table class="middle-table">

            <tbody>
              <tr>
                <td class="td1">序号</td>
                <td class="td2">材料编号</td>
                <td class="td4">材料名称</td>
                <td class="td1">规格</td>
                <td class="td1">型号</td>
                <td class="td1">单位</td>
                <td class="td2">本月采购</td>
                <td class="td2">累计采购</td>
                <td class="td2">供货地点</td>
                <td class="td2">联系人</td>
                <td class="td2">联系电话</td>
              </tr>
              <tr v-for="(item, index) in form.detailList" :key="index">
                <td class="td1">{{ index + 1 }}</td>
                <td class="td2">{{ item.manifestCode }}</td>
                <td class="td4">{{ item.manifestName }}</td>
                <td class="td1">{{ item.specification }}</td>
                <td class="td1">{{ item.model }}</td>
                <td class="td1">{{ item.unit }}</td>
                <td class="td2">{{ item.monthPurchaseNumber }}</td>
                <td class="td2">{{ item.totalPurchaseNumber }}</td>
                <td class="td2">{{ item.bysqgyslxhd }}</td>
                <td class="td2">{{ item.personnel }}</td>
                <td class="td2">{{ item.phone }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="flex">
          <div class="view-subtitle basis-sm32">项目经理（签字盖章）：</div>
          <div class="view-subtitle basis-sm32">监理经理（签字盖章）：</div>
          <div class="view-subtitle basis-sm32 cd-pl16">建设单位（签字盖章）：</div>
        </div>
        <div class="view-subtitle">施工单位材料负责人及电话：</div>
      </div>
    </div>
  </div>
</template>

<script>
import { getMaterialPlanDetails } from "@/api/ma/materialPlan";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
export default {
  name: "MaterialPlanDetailsView",
  props: {
    planId: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "查看报表",
      // 是否显示弹出层
      open: false,
      // 表单参数
      form: {
        detailList: [],
        infoData: {}
      },
      printLoading: false,
      exportPercentage: 0, // 初始进度值
      status: "active" // 进度条状态
    };
  },
  watch: {
    planId: {
      deep: true,
      immediate: true,
      handler (val) {
        this.init(val);
      }
    }
  },
  created () {
  },
  methods: {
    init () {
      this.getMaterialPlanDetails();
    },
    /** 查询材料计划详情列表 */
    getMaterialPlanDetails () {
      this.loading = true;
      getMaterialPlanDetails(this.planId).then(response => {
        this.form = response.data;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel () {
      this.open = false;
      // this.reset();
    },
    reset () {
      this.form = {
        detailList: [],
        infoData: {}
      };
    },
    /** 导出按钮操作 */
    handleExport () {
      this.download('ma/materialPlan/export', {
        planId: this.planId
      }, `甲供材月度需求计划表_${new Date().getTime()}.xlsx`);
    },
    printer () {
      this.printLoading = true;
      this.isPdf = true;
      // this.loadingChange();
      let dom = document.querySelector(".print-box");
      let time = setTimeout(() => {
        this.generatePrint(dom).then(() => {
          this.isPdf = false;
          this.printLoading = false;
          // this.loadingChange();
        });
        clearTimeout(time);
        time = null;
      }, 100);
    },
    generatePrint (dom) {
      return new Promise((resolve, reject) => {
        let reportItem = dom.querySelectorAll(".report-dom");
        const pageNumber = Math.floor((100 / 1) * 10) / 10;
        let nextData = null;
        if (pageNumber > 0) nextData = reportItem.entries();
        let div = document.createElement("div");
        const printPage = (value) => {
          // 生成打印的图片
          if (value.done) {
            // 结束
            console.log(div);
            this.$print(div);
            // document.body.appendChild(div);
            this.exportPercentage = 0;
            resolve();
          } else {
            html2canvas(value.value[1], {
              scale: 2,
              backgroundColor: "#ffffff",
              useCORS: true,
              scrollY: 0,
              scrollX: 0
              // width: 794,
              // height: 1123
            }).then((canvas) => {
              const imgData = canvas.toDataURL("image/jpeg", 1.0);
              let img = document.createElement("img");
              img.classList.add("printImg");
              img.src = imgData;
              div.appendChild(img);
              // // 进度条
              if (this.exportPercentage >= 100) this.exportPercentage = 100;
              else {
                let value = this.exportPercentage + pageNumber;
                value = Math.round(value, 1);
                this.exportPercentage = value;
              }
              // this.loadingChange();
              printPage(nextData.next());
            });
          }
        };
        if (nextData) printPage(nextData.next());
        else this.$message.warning("打印异常，请稍后重试");
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.drawer-border {
  padding: 5mm;
  position: relative;
}

.view-title {
  text-align: center;
  font-size: 22px;
  // font-weight: 600;
  line-height: 46px;
}

.view-subtitle {
  font-size: 14px;
  // font-weight: 600;
  line-height: 36px;
}

.print {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  // position: absolute;
  // bottom: 0;
  // z-index: 999;
  background-color: #fff;
  width: 100%;
  padding: 10px 20px;

  ::v-deep {
    .el-progress-bar {
      width: 300px !important;
    }

    .el-progress-bar__outer {
      height: 15px !important;
    }

    .el-progress-bar__inner {
      background-color: #409eff;
      background-image: -webkit-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: -o-linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      background-image: linear-gradient(45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent);
      -webkit-background-size: 1rem 1rem;
      background-size: 1rem 1rem;
      animation: 2s linear infinite pbs;
      animation-iteration-count: 10;
    }

    @keyframes pbs {
      0% {
        background-position-x: 1rem;
      }
    }
  }
}

.td1 {
  width: calc(100% / 20 * 1);
}

.td2 {
  width: calc(100% / 20 * 2);
}

.td3 {
  width: calc(100% / 20 * 3);
}

.td4 {
  width: calc(100% / 20 * 4);
}
</style>
